<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的采购-付款详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
    <div id="app" class="minWidth">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
            <el-table-column prop="Article_Name" label="商品名称" align="center"></el-table-column>
            <el-table-column align="center" prop="Quantity" label="交易量">
                <template v-slot="{ row }">
                    {{ row.Quantity }}{{ row.Unit }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Amount" label="交易金额">
                <template v-slot="{ row }">￥
                    {{ (Number(row.Amount) * Number(row.Quantity)).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Collection_Amount" label="已付金额">
                <template v-slot="{ row }">
                    ￥{{ Number(row.Collection_Amount).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="未付金额">
                <template v-slot="{ row }">
                    ￥
                    {{
                    (
                    Number(row.Amount) * Number(row.Quantity) -
                    Number(row.Collection_Amount)
                    ).toFixed(2)
                    }}
                </template>
            </el-table-column>
            <el-table-column v-if="lock == 0" prop="Seller_Contact" label="卖方姓名" align="center"></el-table-column>
            <el-table-column v-else prop="Contacts" label="对方企业" align="center"></el-table-column>
            <el-table-column v-if="lock == 0" align="center" prop="Seller_Contact_Phone" label="联系人"></el-table-column>
            <el-table-column v-else align="center" prop="Contacts_Phone" label="对方手机号"></el-table-column>
        </el-table>


        <!--第二个表格数据  -->
        <div style="font-weight: 700;padding: 10px;">运输信息</div>
        <el-table v-if="tableData1.length != 0" class="mt-2" :data="tableData1" border style="width: 100%">
            <el-table-column prop="Transport_Type" align="center" label="运输方式">
            </el-table-column>
            <el-table-column align="center" label="物流信息编号">
                <template v-slot="{ row }">
                    <el-tooltip effect="dark" :content="row.Group_Seek_Logistics_SerialNumber" placement="top">
                        <span>{{ row.Group_Seek_Logistics_SerialNumber }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Article_Name" label="物流信息">
                <template v-slot="{ row }">
                    <el-tooltip effect="dark" :content="row.Transport_Explain" placement="top">
                        <span>{{ row.Transport_Explain }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <!-- 第三个表格数据 -->
        <div class="p-4 bg-white mb-4">
            <div style="font-weight: 700;padding: 10px;">付款信息</div>
            <el-table :data="Data" border style="width: 100%" v-for="(item,index) in Data" :key="index">
                <el-table-column align="center" type="index" label="付款阶段" width="85">
                    <template v-slot="{row}">
                        <div>{{row.Trading_Detail_Name}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Trading_Amount" label="付款额度">
                    <template v-slot="{row}">
                        <div>{{row.Trading_Amount}}%</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="IP" label="付款金额">
                    <template v-slot="{row}">
                        <div>￥{{row.Amount}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Operation_Datetime" label="最晚付款时间">
                    <template v-slot="{row}">
                        <div>{{row.Trading_Date}}天后</div>
                    </template>
                </el-table-column>
                <el-table-column prop="Config" label="操作" align="center">
                    <div v-if="lock == 0" class="flex justify-center align-center" style="width: 20%; height: 100%">
                <el-button v-if="item.Row_Status == '0'" @click="ChoosePayway(item)" type="primary">选择付款方式</el-button>
                <el-button v-else type="danger">付款完成</el-button>
            </div>
            <div v-else class="flex justify-center align-center" style="width: 20%; height: 100%">
                <el-tag v-if="item.Row_Status == '0'" type="danger">对方未完成付款</el-tag>
                <el-tag v-else type="success">付款完成</el-tag>
            </div>
                </el-table-column>
            </el-table>
          
        </div>
        <!-- 金额 -->
        <!-- <div style="font-weight: 700;padding: 10px;">运输信息</div> -->
       <div style="width: 700rpx;margin-top:300rpx;border: 1px solid black;">

       </div>
            <div class="flex align-center justify-end w-100" style="height: 80rpx">
                <span class="font-md">货品总金额：￥{{
        Number(tableData[0].Amount) * Number(tableData[0].Quantity)
      }}</span>
            </div>
            <div class="flex align-center justify-end w-100" style="height: 80rpx">
                <span class="font-md">运费金额：￥0.00</span>
            </div>
            <div class="flex align-end justify-end w-100" style="height: 120rpx">
                <span class="font-lg">订单总价：<span class="h2" >￥{{
          Number(tableData[0].Amount) * Number(tableData[0].Quantity)
        }}</span>元</span>
            </div>
     
        <!--  下面的返回按钮-->
        <el-form>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script type="text/javascript" src="./js/purchase_order_detail.js"></script>
</body>

</html>